<tm-loading-retry [shouldShowRetry]="hasLoadingStudentsFailed" [message]="'Failed to load students'" (retryEvent)="loadStudents(courseDetails.course.courseId)">
  <div *tmIsLoading="isStudentsLoading">
    <h1>Course Details</h1>
    <div class="card">
      <div class="card-body fill-plain">
        <div class="row">
          <label class="col-sm-2 text-sm-end">Course ID:</label>
          <span id="course-id" class="col-sm-9 text-sm-start">
            {{courseDetails.course.courseId}}
          </span>
        </div>
        <div class="row">
          <label class="col-sm-2 text-sm-end">Course name:</label>
          <span id="course-name" class="col-sm-9 text-sm-start">
            {{courseDetails.course.courseName}}
          </span>
        </div>
        <div class="row">
          <label class="col-sm-2 text-sm-end">Course institute:</label>
          <span id="course-institute" class="col-sm-9 text-sm-start">
            {{courseDetails.course.institute}}
          </span>
        </div>
        <div class="row">
          <label class="col-sm-2 text-sm-end">Sections:</label>
          <span id="num-sections" class="col-sm-9 text-sm-start">
            {{courseDetails.stats.numOfSections}}
          </span>
        </div>
        <div class="row">
          <label class="col-sm-2 text-sm-end">Teams:</label>
          <span id="num-teams" class="col-sm-9 text-sm-start">
            {{courseDetails.stats.numOfTeams}}
          </span>
        </div>
        <div class="row">
          <label class="col-sm-2 text-sm-end">Total students:</label>
          <span id="num-students" class="col-sm-9 text-sm-start">
            {{courseDetails.stats.numOfStudents}}
          </span>
        </div>
        <div class="row">
          <label class="col-sm-2 text-sm-end control-label">Instructors:</label>
          <div id="instructors" class="col-sm-9 text-sm-start">
            <div *ngFor="let instructor of instructors">
              {{instructor.role | instructorRoleName}}: {{instructor.name}} ({{instructor.email}})
            </div>
          </div>
        </div>
        <div *ngIf="students.length > 0" style="margin-top: 10px;">
          <div class="text-center">
            <button id="btn-remind-all" type="button" class="btn btn-primary" (click)="openRemindStudentModal()" value="Remind Students to Join">
              <i class="fa fa-envelope"></i>
              Remind Students to Join
            </button>
            <button id="btn-download" type="button" class="btn btn-primary btn-margin-left" (click)="downloadAllStudentsFromCourse(courseDetails.course.courseId)">
              <i *ngIf="!isLoadingCsv" class="fa fa-download"></i>
              <tm-ajax-loading *ngIf="isLoadingCsv"></tm-ajax-loading>
              Download Student List
            </button>
            <button id="btn-delete-all" type="button" class="btn btn-danger btn-margin-left" (click)="openDeleteAllStudentsConfirmationModal()" value="Delete All Students">
              <i *ngIf="!isDeleting" class="fa fa-trash"></i>
              <tm-ajax-loading *ngIf="isDeleting"></tm-ajax-loading>
              Delete All Students
            </button>
          </div>
        </div>
      </div>
    </div>
    <div *ngIf="students.length === 0, else studentListTable" class="alert alert-warning">
      <i class="fa fa-exclamation-circle text-muted"></i>
      There are no students in this course. Click
      <a tmRouterLink="/web/instructor/courses/enroll" [queryParams]="{courseid: courseDetails.course.courseId}">here</a> to enroll students.
    </div>
    <ng-template #studentListTable>
      <div id="student-list" class="card-body p-0 student-table-margin card border">
        <tm-student-list
            [courseId]="courseDetails.course.courseId" [students]="students" [useGrayHeading]="true" [enableRemindButton]="true"
            [tableSortBy]="studentSortBy" [tableSortOrder]="studentSortOrder"
            (removeStudentFromCourseEvent)="removeStudentFromCourse($event)"
        ></tm-student-list>
      </div>
    </ng-template>
  </div>
</tm-loading-retry>
